html`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">`initial_start_date = d3.min(quakes_data_df, d => d.date_only)
initial_end_date = d3.max(quakes_data_df, d => d.date_only)
initial_min_magnitude = 1
viewof start_date = Inputs.date({
label: "Start Date",
value: initial_start_date,
max: initial_end_date,
min: initial_start_date
})
viewof end_date = Inputs.date({
label: "End Date",
value: initial_end_date,
min: initial_start_date,
max: initial_end_date
})
viewof min_magnitude = Inputs.range([1, 10], {
step: 0.1,
label: "Min Magnitude",
value: initial_min_magnitude
})
viewof reset = html`<button class="reset-button" id="resetButton"><i class="fas fa-redo"></i></button>`
// Custom Reset Button with Icon
html`<style>
.reset-button {
width: 40px;
height: 40px;
border: none;
background-color: #D5C3C3;
color: #5A5555;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.reset-button:hover {
background-color: #AB8787;
}
.reset-button i {
font-size: 15px;
}
</style>`resetButton = {
viewof reset.addEventListener("click", () => {
viewof start_date.value = initial_start_date;
viewof end_date.value = initial_end_date;
viewof min_magnitude.value = initial_min_magnitude;
});
}
filtered_quakes = quakes_data_df.filter(d =>
new Date(d.date_only) >= new Date(start_date) &&
new Date(d.date_only) <= new Date(end_date) &&
d.mag >= min_magnitude
)L = require('leaflet@1.2.0')
// Include Leaflet CSS and custom legend CSS
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`html`
<style>
.info.legend {
line-height: 18px;
color: #555;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
padding: 10px;
}
.info.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
`color_scale = d3.scaleSequential(t => d3.interpolateMagma(1 - t))
.domain([1, 6]);
// Create the map with filtered data
map = {
// Calculate dimensions based on card width
let width = 850; // Prilagodite širinu kartice prema potrebi
let height = width / 1.6; // Omjer širine i visine za kartu
// Create the container for the map
let container = DOM.element('div', {
style: `width: ${width}px; height: ${height}px`
});
yield container;
let map = L.map(container).setView([44.4, 16.4], 7);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
filtered_quakes.forEach(d => {
L.circleMarker([d.lat, d.lon], {
radius: d3.scaleLinear().domain([1, 6]).range([1, 6])(d.mag),
fillColor: color_scale(d.mag),
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.5
}).addTo(map)
.bindPopup(`
Date: ${d.date_only}<br/>
Time: ${d.time_only}<br/>
Magnitude: ${d.mag.toFixed(2)}<br/>
Depth: ${d.depth} km<br/>
Location: ${d.place}
`);
});
// Add legend to the map
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [1, 2, 3, 4, 5,6],
labels = [];
div.innerHTML += '<strong>Magnitude</strong><br>';
// Loop through intervals to generate labels with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
var label = grades[i];
if (label === 6) {
label = '6+';
}
div.innerHTML +=
'<i style="background:' + color_scale(grades[i]) + '"></i> '+
label + '<br>';
}
return div;
};
legend.addTo(map);
return map;
}viewof table = Inputs.table(filtered_quakes, {
columns: [
"date_only",
"time_only",
"mag",
"depth",
"place"
],
header: {
date_only: "Date",
time_only: "Time",
mag: "Magnitude",
depth: "Depth",
place: "Location"
},
width: {
date_only: 150,
time_only: 100,
mag: 80,
depth: 80,
place: 150
},
format: {
depth: x => Number.isInteger(x) ? x.toString() : x.toFixed(2)
},
rows: Infinity,
pagination: true
})
html`<style>
table {
table-layout: auto;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #5A5555;
border-bottom: 1px solid #ddd;
font-family: Baskerville;
font-weight: bold;
}
td {
border-bottom: 1px solid #ddd;
word-wrap: break-word;
font-family: Montserrat;
color: #5A5555;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
table tr:hover {
background-color: #D5C3C3;
}
</style>`